<!-- 我的消防 -->

<template>
  <WebForm path="map" class="MapPoint-MyIOT MapPoint-MyFirefighting">
    <div class="MapPoint-MyIOT-title">
      <i class="el-icon-arrow-left" @click="toBack" />

      <span>{{ CORE.dict(DICT.IOT_TYPE, map_param.deviceCategoryId) }}</span>

      <div v-if="pointTypeCode" class="ellips">{{ CORE.dict(typeDict, pointTypeCode) }}</div>
    </div>

    <FormInput v-bind="searchProps" />

    <EasyScroll v-if="!pointTypeCode" class="MapPoint-MyFirefighting-type">
      <div
        v-for="dict in typeDict"
        :key="dict[0]"
        class="flexCC"
        :class="dict[4]"
        @click="toClickType(dict)"
        @mouseenter="mouseEnterType(dict)"
        @mouseleave="mouseLeaveType(dict)"
      >
        <span class="flex1">{{ dict[1] }}</span>
        <span class="flex0">( {{ dict[2] }} / {{ dict[3] }} )</span>
      </div>

      <el-empty v-if="firefighting_readySelect && !typeDict.length" description="暂无点位类型" />
    </EasyScroll>

    <EasyScroll v-if="pointTypeCode">
      <div class="minFull" @mousedown.self="map_setOne" @contextmenu.prevent="CORE.doNothing">
        <div
          v-for="item in iotList"
          :key="item.id"
          :class="item.className"
          @mousedown.prevent="mouseDown($event, item)"
          @contextmenu.prevent="CORE.doNothing"
          @mouseenter="mouseEnter(item)"
          @mouseleave="mouseLeave(item)"
        >
          <img :src="map_GETTER.isLine ? lineIcon : CORE.imageIOT(item)" />
          <span>{{ item.showName }}</span>
        </div>

        <el-empty v-if="readySelect && !iotList.length" description="暂无点位" />
      </div>
    </EasyScroll>
  </WebForm>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import MyIOT from '../MyIOT'

// ============================== 导出组件 ============================== //

export default CORE.extend(MyIOT, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyFirefighting',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [...MyIOT.mixins, CORE.mixSelect('firefighting', 'firefighting_')],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 点位类型编号
     */
    pointTypeCode() {
      return this.firefighting_selectParam.pointTypeCode
    },

    /**
     * 点位类型字典
     */
    typeDict() {
      const { firefighting_selectParam: { pointTypeName } } = this
      const name = 'MapPoint-MyIOT-item'
      const typeDict = this.firefighting_selectDict.filter(([, name]) => !pointTypeName || name.includes(pointTypeName))
      return typeDict.map((dict) => {
        const marked = this.map_list.filter((item) => item.pointTypeCode === dict[0])
        const all = (this.select[0] || []).filter((item) => item.pointTypeCode === dict[0])
        const hoverStr = this.map_MAP.hoverType === dict[0] ? ` ${name}-hover` : ''
        return [...dict, marked.length, all.length, `${name}${hoverStr}`]
      })
    },

    /**
     * IOT 列表
     */
    iotList() {
      const { map_param: { keyword, checkboxList }, firefighting_selectParam: { pointTypeCode } } = this

      if (!this.map_readyInfo || !this.map_readyList || !checkboxList.includes(pointTypeCode)) return []

      const name = 'MapPoint-MyIOT-item'
      const iotList = (this.select[0] || []).filter((iot) => iot.showName.includes(keyword))
        .filter((item) => item.pointTypeCode === pointTypeCode)

      return iotList.map(({ id, ...iot }) => {
        const point = this.map_list.find((item) => item.deviceId === id)

        const grayStr = point ? ` ${name}-gray` : ''
        const bindStr = this.map_one.deviceId === id ? ` ${name}-bind` : ''
        const hoverStr = this.map_MAP.hoverId === id ? ` ${name}-hover` : ''

        return { ...iot, id, point, className: `${name}${grayStr}${bindStr}${hoverStr}` }
      })
    },

    /**
     * 搜索属性
     */
    searchProps() {
      const { pointTypeCode } = this
      return {
        one: pointTypeCode ? this.map_param : this.firefighting_selectParam,
        tip: pointTypeCode ? '名称 / 编号' : '点位类型名称',
        bind: pointTypeCode ? 'keyword' : 'pointTypeName',
        medium: true,
        noLabel: true,
      }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    ...MyIOT.methods,

    /**
     * 点击返回
     */
    toBack() {
      this.map_setOne()
      CORE.merge(this.map_param, { keyword: '', checkboxList: [] })

      if (this.pointTypeCode) {
        CORE.merge(this.firefighting_selectParam, { pointTypeCode: '', pointTypeName: '' })
        return
      }

      this.map_param.deviceCategoryId = ''
      this.map_setList()

      this.map_selectParam.deviceCategoryId = ''
      this.map_setSelect()

      this.selectParam.nextIdList = []
    },

    /**
     * 点击每项
     */
    toClickType([code]) {
      this.mouseLeaveType()
      this.map_param.checkboxList = [code]
      this.firefighting_selectParam.pointTypeCode = code
    },

    /**
     * 鼠标进入
     */
    mouseEnterType([code]) {
      this.map_MAP.hoverType = code
    },

    /**
     * 鼠标离开
     */
    mouseLeaveType() {
      this.map_MAP.hoverType = ''
    },
  },
})
</script>

<style lang="scss">
@import './index.scss';
</style>
